<template>
	<idea v-if="!myIsShow"></idea>
	<view v-else>
		<Tabbar :current-page="1"></Tabbar>
		<view class="header">
			<image class="header-img1" src="/static/img/index1.png" mode="widthFix"></image>
			<view class="header-up">
				<image class="up-img" src="/static/img/index2.png" mode="widthFix" @click="goEtcCancel"></image>
				<image class="up-img" src="/static/img/index3.png" mode="widthFix" @click="goEtcManage"></image>
			</view>
		</view>

		<!-- 可移动发布按钮 -->
		<movable-area class="movableArea">
			<movable-view class="movableView" direction="all" x="600rpx" y="600rpx">
				<!-- <button class="bg-btn" open-type="contact">
					<image class="bg-img" src="/static/img/custom.png" mode="widthFix"></image>
				</button> -->
				<contact-button
				  tnt-inst-id="SLk_aEqp"
				  scene="SCE01288627"
				  size="88rpx"
				  color="#fff"
				/>
			</movable-view>
		</movable-area>

		<view class="box">
			<!-- <view class="box-img" @click="goCancelService">
        <image class="box-img4" src="../../static/img/index4.png" mode=""></image>
      </view> -->
			<!-- 轮播图1 -->
			<view class="box-swiper">
				<u-swiper height="162rpx" bgColor="transparent" :list="swiperList1" keyName="dictInfoImg" radius="10"
					indicator @change="e => current1 = e.current" @click="goCancelService" indicatorMode="dot" circular
					imgMode="aspectFill" autoplay interval='15000'>
				</u-swiper>
			</view>
			<view class="box-img5" @click="clickto">
				<image class="box-img5" src="/static/img/index5.png" mode="widthFix"></image>
			</view>

			<image class="box-img6" src="/static/img/index6.jpg" mode="widthFix"></image>

		</view>

		<!-- 弹窗 -->
		<view class="fetch" v-if="isWatch" @click.stop="stopFetch"></view>
		<view class="erwei-box" v-if="isWatch">
			<view class="fetch-up up1">请选择您要办理的产品类型</view>
			<view class="fetch-up up2" @click="goEtcAli">支付宝扣费ETC</view>
			<view class="fetch-up up3" @click="goEtcWx">微信扣费ETC</view>
		</view>
	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import Vue from 'vue';
	import { checkLogin, getRoles } from "../../api/common/login";
	import Tabbar from "../../components/tabbar.vue"; //引入底部导航
	import idea from "../../components/idea.vue"; //引入底部导航
	import { getDictAll, getOneDictByCode } from "../../api/common/dict";
	import { aliPrice } from "./data";
	import { GetSysInfo } from "../../api/my/my";
	import { getAliUserId } from "../../api/common/login";
	let app = getApp();
	export default Vue.extend({
		components: {
			Tabbar, //底部导航
			idea
		},
		data() {
			return {
				myIsShow: app.globalData.myIsShow,
				show: false,
				isWatch: false,
				aliPriceCode: '',
				userInfo: '',
				sysInfoPhone: '',//服务热线
				current1: 0,
				swiperList1: [
					{ dictInfoImg: '/static/img/index4.png', targetValue: '/pages/index/etc-cancelService' },
					// { dictInfoImg: '/static/img/index6.jpg' },
				]
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: 'ETC注销'
			})

		},
		async onShow() {
			// await checkLogin()

			// const roles = await getRoles()
			// if (roles.indexOf('role:login_app') === -1) {
			// 	uni.navigateTo({
			// 		url: '/pages/common/nick_avatar'
			// 	})
			// }
			this.login()
			await this.getAliPrice() // 获取支付宝绑定费用
			await this.getWxPrice() // 获取微信绑定费用
			await this.getIndexSwiper();//首页轮播图
			await this.getSysInfo();//获取系统设置
		},
		methods: {
			async login() {
				// #ifndef H5
				uni.login({
					success: async (res) => {
						const { code, data, msg } = await getAliUserId(res.authCode)
						// console.log(code, data, msg )
						uni.setStorageSync('userInfo',data)
						uni.setStorageSync('token', data.token)
					}
				})
				// #endif
				
				// #ifdef H5
				const datas={
						"code": 1,
						"msg": "登录成功",
						"time": "1721723408",
						"data": {
							"id": 8,
							"group_id": 1,
							"username": "务实的钢笔",
							"salt": "A63qSX",
							"mobile": "",
							"avatar": "",
							"level": 1,
							"money": "0.00",
							"token": "1940f2cf-0777-4a0f-84c2-44f923ed9bbe",
							"user_id": 8,
							"createtime": 1721723408,
							"expiretime": 1724315408,
							"expires_in": 2592000
						}
					}
				// #endif
				
									
				
				uni.setStorageSync('userInfo',datas.data)
				uni.setStorageSync('token', datas.data.token)
				
				
				
				
				//怎么运行  啊
				// 	console.log('调用登陆token')
				// 	let loginRes;
				// 	loginRes = await uni.login({ provider: 'weixin' });
				// 	// loginRes=await my.getAuthCode({scope:'auth_base'})
				// 	// console.log(loginRes.authCodes)
				// 	// return
				// 	// if (loginRes.errMsg !== 'login:ok') {
				// 	// 	console.log("静默登陆失败：", loginRes)
				// 	// }

				// 	console.log("静默登陆获取code：", loginRes.authCode) //微信code，静默登录
				// 	const { code, data, msg } = await getAliUserId(loginRes.authCode)
				// 	if (code !== 1) {
				// 		console.log('登陆失败：', data, msg)
				// 	} else {
				// 		console.log('登陆成功：', data)
				// 		// uni.setStorageSync('token', data)
				// 		// uni.switchTab({
				// 		// 	url: '/pages/index/index'
				// 		// })
				// 	}
			},
			clickto(){
				uni.navigateTo({
					url:'/pages/index/select-pay'
				})
			},
			// 获取支付宝绑定费用
			async getAliPrice() {
				const data = await getOneDictByCode('etc_money_handle_zhifubao')
				uni.setStorageSync('aliPrice', data.dictInfoValue)
			},
			// 获取微信绑定费用
			async getWxPrice() {
				const data = await getOneDictByCode('etc_money_handle_wx')
				uni.setStorageSync('wxPrice', data.dictInfoValue)
			},

			openShow() {
				// this.isWatch = true
				uni.navigateToMiniProgram({
					appId: 'wxe2d5b55a9da20785',
					// envVersion: busMiniData[0].dictInfoOther,
					success(res) {
						// 打开成功
					}
				})
			},
			// 点击弹窗关闭isWatch:any
			stopFetch() {
				this.isWatch = false
			},
			// 获取首页轮播图
			async getIndexSwiper() {
				const params = {
					dictCode: 'banner_index'
				}
				const data = await getDictAll(params)
				this.swiperList1 = data;
				console.log(data, '获取首页轮播图')
			},
			// 获取系统设置
			async getSysInfo() {
				const { data } = await GetSysInfo();
				// console.log(data,'系统设置')
				this.sysInfoPhone = data.sysInfoPhone;
				// this.sysIsOpenEtcCancel = data.sysIsOpenEtcCancel;//是否开启ETC注销
			},
			// 极速注销
			goEtcCancel() {
				uni.navigateTo({
					url: '/pages/index/etc-cancel'
				})
			},
			// 极速办理
			goEtcManage() {
				uni.navigateTo({
					url: '/pages/index/select-pay'
				})
			},

			// 注销服务说明
			goCancelService(e) {
				// console.log(this.swiperList1[e],'++++');
				const url = this.swiperList1[e].targetValue;
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
				// if(e==1){
				//   uni.makePhoneCall({
				//     phoneNumber: this.sysInfoPhone //仅为示例
				//   }).catch((e) => {
				//     // console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				//   });
				// }
			},

			// 支付宝扣费ETC
			goEtcAli() {
				uni.navigateTo({
					url: '/pages/index/etc-ali'
				})
				this.isWatch = false
			},
			// 微信扣费ETC
			goEtcWx() {
				uni.navigateTo({
					url: '/pages/index/etc-wx'
				})
				this.isWatch = false
			}
		}
	})
</script>

<style scoped>
	.header {
		height: 973rpx;
		background: linear-gradient(to bottom, #FFFFFF, #C9E2FF);
		padding-top: 25rpx;
		z-index: -1;
	}

	.header-img1 {
		width: 263rpx;
		height: 93rpx;
		margin-left: 34rpx;
	}

	.header-up {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 38rpx;
		padding: 0 30rpx;
	}

	.up-img {
		width: 336rpx;
		height: 392rpx;
	}

	.box {
		margin-top: -415rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx;
	}

	.box-img {
		width: 100%;
		height: 162rpx;
		border-radius: 10rpx;
		box-shadow: 0px 2px 4px 0px #A7CEFA;
	}

	.box-img4 {
		width: 100%;
		height: 162rpx;
		border-radius: 10rpx;
	}

	.box-img5 {
		width: 100%;
		height: 260rpx;
		border-radius: 10rpx;
		box-shadow: 0px 2px 4px 0px #FEF6E0;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.box-img5 {
		width: 100%;
		height: 260rpx;
		border-radius: 10rpx;
	}

	.box-img6 {
		width: 100%;
		height: 691rpx;
		margin-top: 46rpx;
		margin-bottom: 126rpx;
	}

	/* 物流码 */
	.fetch {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 20;
	}

	.erwei-box {
		width: 690rpx;
		/* height: 304rpx; */
		background-color: #ffffff;
		border-radius: 30rpx;
		position: fixed;
		top: 78%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1000;
		font-size: 32rpx;
	}

	.fetch-up {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
	}

	.up2 {
		border-top: 2rpx solid #E4E4E4;
		border-bottom: 2rpx solid #E4E4E4;
		color: #1A6FFD;
	}

	.up3 {
		color: #1A6FFD;
	}

	/* 可移动按钮 */
	.movableArea {
		position: fixed;
		top: 0rpx;
		left: 0;
		bottom: 200rpx;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* //设置area元素不可点击，则事件便会下移至页面下层元素 */
		z-index: 100;
	}

	.movableView {
		pointer-events: auto;
		/* //可以点击 */
		width: 88rpx;
		height: 88rpx;
	}

	.bg-img {
		width: 100%;
		height: 100%;
	}

	.bg-btn {
		background-color: #00000000;
		padding: 0;
	}

	button::after {
		border: none;
	}
</style>